<template>
    <div class="top">
        <img title="基于vue3+ts+svg的web组件编辑器" class="logoimg" src="../assets/logo.png" />
        <span class="logotext">伊泰在线组态</span>
        <div class="menu">
    <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-sub-menu index="1">
        <template #title>组态图组态图</template>
        <el-menu-item @click="loadExample('json/test.json','test')" index="1-1">测试组态图</el-menu-item>
        <el-menu-item @click="loadExample('json/example.json','')" index="1-2">电力系统组态图</el-menu-item>
        <el-menu-item @click="loadExample('json/example2.json','')" index="1-3">水务系统组态图</el-menu-item>
        <el-menu-item @click="loadExample('json/water.json','water')" index="1-4">排水系统组态图</el-menu-item>
        <el-menu-item @click="loadExample('json/1658047709488.json','')" index="1-5">mine-web</el-menu-item>
        <el-menu-item @click="loadExample('json/1658132748394.json','')" index="1-6">采煤机</el-menu-item>
        <el-menu-item @click="loadExample('json/mtc.json','mtc')" index="1-7">主运输系统组态图</el-menu-item>
        <el-menu-item @click="loadExample('json/im.json','im')" index="1-8">智能综采组态图</el-menu-item>
        <el-sub-menu index="1-9">
            <template #title>电力系统组态图</template>
            <el-menu-item index="1-9-1"  @click="loadExample('json/electricPower/main.json','em')">总控</el-menu-item>
            <el-menu-item index="1-9-2" @click="loadExample('json/electricPower/ele1.json','ele1')">电力1</el-menu-item>
          </el-sub-menu>
        <el-menu-item @click="bus.emit('loadExampleData')" index="1-6">电力组态图硬件加载</el-menu-item>
</el-sub-menu>
      <el-sub-menu index="2">
        <template #title>预览模式</template>
        <el-menu-item @click="bus.emit('switchMode')" index="2-1">预览模式切换</el-menu-item>
        <el-menu-item @click="bus.emit('editPrviewMode')" index="2-2">预览模式数据编辑</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>下载</template>
        <el-menu-item @click="bus.emit('downloadSvgData')" index="3-1">Json数据下载</el-menu-item>
        <el-menu-item @click="bus.emit('downloadSvgDomData')" index="3-2">组态图下载</el-menu-item>
      </el-sub-menu>
      <!-- <el-sub-menu index="4">
        <template #title>保存到</template>
      </el-sub-menu> -->
  </el-menu>
           
        </div>
         <el-button type="success" size="normal"  style="margin-left: auto; width:130px" @click="() => { emit('saveSvgInfo') }">数据保存</el-button>
    </div>
</template>

<script setup lang="ts">
import { inject } from "@vue/runtime-core";
import { NButton, useMessage, NPopover } from "naive-ui";
const bus:any=inject('$bus')
const message = useMessage();
const emit = defineEmits(['saveSvgInfo','loadExample']);
const loadExample=(path,name)=>{
    emit('loadExample',path,name)
}
defineExpose({
    /**
     * @description: 保存svg结果 父组件调用用
     * @param {*}type 0失败 1成功 2警告
     * @return {*}
     */
    saveSvgInfoRes(type: any) {
        if (type?.code == 0) {
            message.error(type?.msg);
        }
        else if (type?.code == 1) {
            message.success(type?.msg);
        }
        else if (type?.code == 2) {
            message.warning(type?.msg);
        }
    }
})
</script>
<style lang="scss" scoped>
.top{
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    height:100%;
    .menu{
        height: 100%;
        display: inline-block;
        width: 500px;
        ::v-deep(.el-menu){
            height: 100%;
        }
        .el-menu--horizontal{
            border-bottom: none;
        }
    }
    
}
.logoimg {
    height: 2rem;
    min-width: 2rem;
    margin-right: 0.1rem;
    margin-top: 0.2rem;
}
.logotext {
    font-size: 0.8rem;
    font-weight: 700;
    color: #2c3e50;
    margin-top: 0.7rem;
    width: 10%;
}
.a-link {
    text-decoration: none;
    margin-right: 1.5rem;
    align-self: center;
}
.button-class {
    margin-right: 1.5rem;
}
</style>